<template>
    <div class="confirm-btn-layout">
        <transition name="scale">
            <button class="btn btn-primary" @click="confirm_show=true" v-show="confirm_show==false">{{btnName}}</button>
        </transition>
        <transition name="scale">
            <button class="btn btn-primary" @click="confirm" v-show="confirm_show">确定</button>
        </transition>
        <transition name="scale">
            <button class="btn btn-primary" @click="cancel" v-show="confirm_show">取消</button>
        </transition>
        
    </div>
    
</template>

<script>
    export default {
        name: 'ConfirmBtn',
        data(){
            return {
                confirm_show:false
            }
        },
        props:{
            btnName:{
                type:String,
                default:'do somthing'
            }
        },
        watch:{
            
        },
        methods:{
            confirm(){
                var self = this;
                self.$emit('confirm');
                self.confirm_show = false;
            },
            cancel(){
                var self = this;
                self.$emit('cancel');
                self.confirm_show = false;
            }
        },
        mounted: function () {

        }
    }
</script>

<style scoped>
.confirm-btn-layout{
    display: inline-block;
}

.scale-enter-active,.scale-leave-active {
    transition: opacity 1s;
}

.scale-enter,
.scale-leave-to {
    opacity: 0;
}
</style>